<template>
  <div class="headerTwo">
    <el-row>
      <el-col :span="7">
        <div class="logo">
          <img class="logoImg" :src="comanyIcon">
        </div>
      </el-col>

      <el-col :span="17" class="menus">
        <el-menu
          id="headerMenu"
          :default-active="menuKey"
          ref="elMenu"
          mode="horizontal"
          @select="handleSelect"
          text-color="#000000"
          active-text-color="#1e50ae">
          <el-menu-item index="index">网站首页</el-menu-item>
          <el-menu-item index="projectShow">工程展示</el-menu-item>
          <el-menu-item index="products">产品中心</el-menu-item>
          <el-menu-item index="aboutUs">关于我们</el-menu-item>
          <el-menu-item index="contectUs">联系我们</el-menu-item>
          <el-menu-item index="people">人才招聘</el-menu-item>
        </el-menu>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getCompanyInfo } from '@/request/api'
export default {
  name: 'headerTwo',
  data () {
    return {
      menuKey: '',
      comanyIcon: ''
    }
  },
  mounted () {
    // 通过路由设置当前菜单栏位置
    this.menuKey = this.$route.path.substring(1)

    // 获取公司信息，主要获取公司图标
    getCompanyInfo().then(res => {
      this.comanyIcon = 'http://backmanage.yuxjt.com/' + res.company_icon.url_img
    })
  },
  watch: {
    $route (to, from) {
      this.menuKey = to.path.substring(1)
    }
  },
  methods: {
    handleSelect (key, keyPath) {
      this.$router.push('/' + key)
    }
  }
}
</script>

<style lang="scss" scoped>
  .headerTwo {
    width: 1280px;
    margin: 0 auto;
    position: relative;
    right: 10px;
    .logo {
      float: left;

      .logoImg {
        width: 234px;
      }
    }

    .menus {
      float: right;
      .el-menu {
        float: right;
      }
    }
  }
</style>
